<!--<template>-->
<!--  <div>-->
<!--    <div class="block">-->
<!--      <span class="demonstration">时间 </span>-->
<!--      <el-date-picker-->
<!--          v-model="range"-->
<!--          type="daterange"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          @change="fetchData">-->
<!--      </el-date-picker>-->
<!--    </div>-->

<!--    <el-table :data="incomeList" style="width: 100%">-->
<!--      <el-table-column prop="createTime" label="日期"></el-table-column>-->
<!--      <el-table-column prop="paymentInfo" label="类型"></el-table-column>-->
<!--      <el-table-column prop="amountMoney" label="金额"></el-table-column>-->
<!--      <el-table-column prop="status" label="状态">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.status === 0">进行中</span>-->
<!--          <span v-if="scope.row.status === 1">已完成</span>-->
<!--          <span v-if="scope.row.status === 2">未完成</span>-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--    </el-table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import Api from '@/api/wallet'-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      startDate: '',-->
<!--      endDate: '',-->
<!--      incomeList: [],-->
<!--      type:1-->
<!--    }-->
<!--  },-->

<!--  methods: {-->
<!--    getIncomeBill() {-->
<!--      Api.getIncomeBill(this.type,10,1).then(res=>{-->
<!--        console.log("查询成功")-->
<!--        console.log(res)-->
<!--        console.log(res.records)-->
<!--        this.incomeList=res.records-->
<!--        console.log("获取数组")-->
<!--        console.log(this.expenditures)-->
<!--      })-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getIncomeBill()-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.income-records {-->
<!--  margin: 20px;-->
<!--  font-size: 16px;-->
<!--}-->

<!--.income-records h2 {-->
<!--  margin: 0;-->
<!--  font-size: 20px;-->
<!--}-->

<!--.income-records .date-select {-->
<!--  margin: 20px 0;-->
<!--}-->

<!--.income-records label {-->
<!--  display: inline-block;-->
<!--  width: 80px;-->
<!--}-->

<!--.income-records input[type="date"] {-->
<!--  width: 150px;-->
<!--  height: 30px;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.income-records button {-->
<!--  height: 30px;-->
<!--  font-size: 16px;-->
<!--  background-color: #409EFF;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  border-radius: 3px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.income-records button:hover {-->
<!--  background-color: #66b1ff;-->
<!--}-->

<!--.income-records table {-->
<!--  width: 100%;-->
<!--  border-collapse: collapse;-->
<!--  margin-top: 20px;-->
<!--}-->

<!--.income-records th,-->
<!--.income-records td {-->
<!--  padding: 8px;-->
<!--  text-align: center;-->
<!--  border: 1px solid #ddd;-->
<!--}-->

<!--.income-records th {-->
<!--  background-color: #f2f2f2;-->
<!--}-->

<!--.income-records .total-income {-->
<!--  display: inline-block;-->
<!--  vertical-align: middle;-->
<!--  margin-left: 20%;-->
<!--}-->
<!--</style>-->
<template>
  <div>
    <div class="block">
      <span class="demonstration">时间 </span>
      <el-date-picker
          v-model="range"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="fetchData">
      </el-date-picker>
    </div>
    <div>
      <el-table :data="tableData" stripe>
        <el-table-column prop="createTime" label="日期"></el-table-column>
        <el-table-column prop="paymentInfo" label="款项"></el-table-column>
        <el-table-column prop="amountMoney" label="金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope"><span
              :class="{ 'text-primary': scope.row.status === 0, 'text-success': scope.row.status === 1, 'text-danger': scope.row.status === 2 }">
    {{ scope.row.status === 0 ? '进行中' : scope.row.status === 1 ? '已完成' : '失败' }} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 20px;"
          background
          layout="prev, pager, next"
          :pager-count="5"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Api from '@/api/wallet'

export default {
  name: 'Pagination',
  data() {
    return {
      tableData: [],
      total: 0,  // 总数量
      pageSize: 11,  // 每页数量
      currentPage: 1, // 当前页码
      range: [],
      Date: this.range,
    };
  },
  mounted() {
    // 加载数据
    this.loadData();
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      const startDate = this.range[0];
      const endDate = this.range[1];
      console.log(typeof (startDate));
      console.log(endDate);
      const start = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')} ${startDate.getHours().toString().padStart(2, '0')}:${startDate.getMinutes().toString().padStart(2, '0')}:${startDate.getSeconds().toString().padStart(2, '0')}`;
      const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')} ${endDate.getHours().toString().padStart(2, '23')}:${endDate.getMinutes().toString().padStart(2, '59')}:${endDate.getSeconds().toString().padStart(2, '59')}`;
      console.log(start + "-----------" + end)
      Api.getRecordsByTime(start, end, 1).then(res => {
            res.records.forEach(item => {
              item.createTime = (new Date(item.createTime)).toLocaleString()
            });
            this.tableData = res.records;
          }
      ).catch(err => {
        console.log(3)
        console.log(err)
      });

    },
    // 加载数据方法
    loadData() {
      Api.getIncomeBill(1, this.pageSize, this.currentPage).then(res => {
        this.total = res.total;
        res.records.forEach(item => {
          item.createTime = (new Date(item.createTime)).toLocaleString()
        });
        this.tableData = res.records;
      });
    },
    // 处理分页点击事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    }
  }
};
</script>

<style scoped>
el-table {
  width: 80%;
  margin: 0 auto;
}

.text-success {
  color: #67c23a;
}

.text-primary {
  color: blue;
}

.text-danger {
  color: red;
}
</style>
